<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.2/css/layui.css"/>
</head>
<body>
<div id="check" class="layui-hide">
  <form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">订单号码</label>
    <div class="layui-input-block">
      <input type="text" id="orderNumber" name="orderNumber" required readonly lay-verify="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">赔付金额(元)</label>
    <div class="layui-input-block">
      <input type="number" id="money" name="money" required  readonly lay-verify="required|money" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">存在问题</label>
    <div class="layui-input-block">
      <input type="text" id="question" name="question" readonly required lay-verify="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">问题描述</label>
    <div class="layui-input-block">
      <textarea name="remake" id="remake" readonly placeholder="问题描述" autocomplete="off" class="layui-textarea"></textarea>
    </div>
  </div>
  </form>
</div>
<div class="layui-form">
  订单号：
  <div class="layui-inline">
    <input class="layui-input" name="orderNumber" autocomplete="off">
  </div>
  客户：
  <div class="layui-inline">
    <input class="layui-input" name="customerName" autocomplete="off">
  </div>
  车牌号：
  <div class="layui-inline">
    <input class="layui-input" name="carPlateNumber" autocomplete="off">
  </div>
  <button class="layui-btn" lay-filter="search" lay-submit>搜索</button>
</div>
<table class="layui-hide" id="order" lay-filter="order"></table>
<script type="text/html" id="leftBtn">
  {{#  if(d.state == 1){ }}
  <a class="layui-btn layui-btn-norma layui-btn-xs" lay-event="AgreeBorrowCar">同意借车</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="RefuseBorrowCar">拒绝借车</a>
  {{#  } }}
  {{#  if(d.state == 4){ }}
  <a class="layui-btn layui-btn-norma layui-btn-xs" lay-event="openCarChecked">查看车检</a>
  {{#  } }}
  {{#  if(d.state == 2 || d.state == 3 || d.state == 6 || d.state == 5 || d.state == 7){ }}
  <a class="layui-btn layui-btn-xs layui-btn-disabled">已处理</a>
  {{#  } }}

</script>

<script src="https://www.layuicdn.com/layui-v2.6.2/layui.js"></script>
<script th:inline="none" type="text/javascript">
  layui.use(['table', 'layer', 'form'], function () {
    const table = layui.table;
    const layer = layui.layer;
    const form = layui.form;
    const $ = layui.$;
    const tableIns = table.render({
      id: 'order-table',
      elem: '#order',
      url: "/api/order/page",
      method: 'post', //异步请求方法
      defaultToolbar: ['filter'],
      contentType: 'application/json',
      title: '汽车类型表',
      cellMinWidth: 100,
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'id', width: 70,},
        {field: 'orderNumber', title: '订单号',},
        {field: 'carPlateNumber', title: '车牌号',},
        {field: 'customerName', title: '客户名称',},
        {
          field: 'state', title: '状态', templet: function (d) {
            switch (d.state) {
              case 1:
                return '<span style="color: #00cc03;">申请借车</span>';
              case 2:
                return '<span style="color: #ccaa00;">订单进行中</span>';
              case 3:
                return '<span style="color: #245c20;">已拒绝借车</span>';
              case 4:
                return '<span style="color: #ff0000;">申请还车</span>';
              case 5:
                return '<span style="color: #002ccc;">已拒绝还车</span>';
              case 6:
                return '<span style="color: #1f1111;">订单已结束</span>';
              case 7:
                return '<span style="color: #50525f;">订单已取消</span>';
            }
          }
        },
        {field: 'tenancyTerm', title: '租期',},
        {field: 'startDate', title: '开始租期',},
        {field: 'endDate', title: '结束租期',},
        {field: 'outDate', title: '出库时间',},
        {field: 'inDate', title: '入库时间',},
        {field: 'cashPledge', title: '押金(元)',},
        {field: 'money', title: '租金(元/天)',},
        {field: 'feedback', title: '处理意见',},
        {fixed: 'right', title: '操作', toolbar: '#leftBtn', width: 160}
      ]],
      page: true,
      response: {
        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
      }, request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.map.data.total, //解析数据长度
          "data": res.map.data.records//解析数据列表
        };
      }
    });

    // 重载
    form.on("submit(search)", data => {
      tableIns.reload({
        url: "/api/order/page",
        contentType: 'application/json',
        method: 'post',
        where: data.field,
        page: {
          pageNum: 1 // 重新从第 1 页开始
        }
      });
    })


    table.on("tool(order)", (obj) => {
      const data = obj.data; //获得当前行数据
      const layEvent = obj.event;
      console.log(data);
      // 同意借车
      if (layEvent === 'AgreeBorrowCar') {
        const url = "/api/order/" + data.id + "/state/2";
        layer.prompt({title: '处理意见'}, function (value) {
          let data = "feedback=" + value;
          $.post(url, data, function (data) {
            if (data.code && data.code === 200) {
              layer.msg("处理成功");
              setTimeout(() => {
                layer.closeAll();
                table.reload('order-table');
              }, 1000)
            } else {
              layer.msg(data.message);
            }
          })
        });
      }
      // 拒绝借车
      if (layEvent === 'RefuseBorrowCar') {
        const url = "/api/order/" + data.id + "/state/3";
        layer.prompt({title: '处理意见'}, function (value) {
          let data = "feedback=" + value;
          $.post(url, data, function (data) {
            if (data.code && data.code === 200) {
              layer.msg("处理成功");
              setTimeout(() => {
                layer.closeAll();
                table.reload('order-table');
              }, 1000)
            } else {
              layer.msg(data.message);
            }
          })
        });
      }
      
      if (layEvent === 'openCarChecked'){
        layer.open({
          type: 1, //Page层类型
          area: ['600px', '350px'],
          title: '车检报告',
          shade: 0.6, //遮罩透明度
          anim: 1, //0-6的动画形式，-1不开启
          content: $("#check").html(),
          btn: ['同意还车', '拒绝还车'],
          btnAlign: 'c',
          success: function (layero) {
            form.render();
            const url = "/api/check?orderId=" + data.id;
            $.get(url, function (response) {
              const check = response.map.data;
              layero.find("#orderNumber").val(check.orderNumber);
              layero.find("#money").val(check.money);
              layero.find("#question").val(check.question);
              layero.find("#remake").val(check.remake);
            })
              },
              yes: function () {
                const url = "/api/order/" + data.id + "/state/6";
                layer.prompt({title: '处理意见'}, function (value) {
                  let data = "feedback=" + value;
                  $.post(url, data, function (data) {
                    if (data.code && data.code === 200) {
                      layer.msg("处理成功");
                      setTimeout(() => {
                        layer.closeAll();
                        table.reload('order-table');
                      }, 1000)
                    } else {
                      layer.msg(data.message);
                    }
                  })
                });
              },
              btn2: function (){
                const url = "/api/order/" + data.id + "/state/5";
                layer.prompt({title: '处理意见'}, function (value) {
                  let data = "feedback=" + value;
                  $.post(url, data, function (data) {
                    if (data.code && data.code === 200) {
                      layer.msg("处理成功");
                      setTimeout(() => {
                        layer.closeAll();
                        table.reload('order-table');
                      }, 1000)
                    } else {
                      layer.msg(data.message);
                    }
                  })
                });
              }
            }
        )}
    })
  });
</script>
</body>
</html>